<template>
  <div class="video-play-ptz-container">
    <div class="header">视频回放</div>
    <div class="video-box">
      <videoplayBk :url="currentUrl" :reportTime="reportTime"></videoplayBk>
    </div>
    <!-- <div class="point-info">
      <div class="name-info">
        <div class="name">近开里西门监控点</div>
        <div class="lineStatus">
          <div class="circle"></div>
          在线
        </div>
      </div>
      <div class="types">
        <div class="tip">出入口</div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import videoplayBk from "@/components/video/videobk.vue";
import { getOneKeyCheck } from "@/api/event.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const panelVideo = (cmd) => {};
const route = useRoute();
let currentIndexCode = ref("");
let busizEventId = ref("");
let currentUrl = ref("");
let reportTime = ref('');
onMounted(async () => {
  currentIndexCode.value = route.query.indexCode;
  busizEventId.value = route.query.busizEventId;
  reportTime.value = route.query.reportTime;
  console.log(currentIndexCode.value, busizEventId.value, reportTime.value);
  try {
    const { data } = await getOneKeyCheck({
      busizEventId: route.query.busizEventId,
      role: "",
      deviceId: route.query.indexCode,
      uuid: "",
      previewTimeDurning: 60000,
      postTimeDurning: 60000,
      ifwww: "1",
    });
    if (data.playBackVideoUrl) {
      currentUrl.value = data.playBackVideoUrl;
    } else {
      ElMessage.error("视频地址获取失败,暂无视频流");
    }
  } catch (e) {
    console.error(e);
  }
});
</script>

<style lang="scss" scoped>
.video-play-ptz-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f4f6fa;
  .header {
    width: 100%;
    height: 100rpx;
    margin-top: 50rpx;
    background: #fff;
    text-align: center;
    line-height: 100rpx;
  }
  .video-box {
    margin-top: 28rpx;
    width: 100%;
    height: 434rpx;
    overflow: hidden;
    padding: 0 28rpx;
  }

  .point-info {
    width: calc(100% - 56rpx);
    margin: 0 auto;
    height: 134rpx;
    background: #fff;
    padding: 15rpx 38rpx;
    // padding: 0 28rpx;

    .name-info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        margin-top: 17rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 23rpx;
        color: #333333;
        line-height: 33rpx;
      }

      .lineStatus {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #39aa92;
        line-height: 33rpx;

        .circle {
          width: 17rpx;
          height: 17rpx;
          border-radius: 50%;
          background: #39aa92;
          margin-right: 10rpx;
        }
      }
    }

    .types {
      margin-top: 10rpx;
      display: flex;
      align-items: center;

      .tip {
        min-width: 81rpx;
        height: 38rpx;
        background: #d2f0ff;
        border-radius: 8rpx;
        text-align: center;
        padding: 0 17rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #45aff7;
        line-height: 38rpx;
      }
    }
  }
  .panel-box {
    margin-top: 26rpx;
    display: flex;
    align-items: top;
    padding: 0 28rpx;

    .ptz {
      padding: 38rpx 98rpx 36rpx 84rpx;
      width: 444rpx;
      height: 337rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
      margin-right: 19rpx;
    }
    .zoomptz {
      width: 229rpx;
      height: 337rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-left: 90rpx;
      .zoombtn {
        width: 76rpx;
        height: 76rpx;
        background: #e4effd;
        border-radius: 15rpx;
        border: 2rpx solid #c3dcff;
        padding: 17rpx;
        image {
          width: 42rpx;
          height: 42rpx;
        }
      }
    }
  }
}
</style>
